<template>
  <div class="cc-calendar">
    <calendarHeader
      :head-options="headOptions"
      :statistics="statistics"
      @handlePickDate="handlePickDate"
      @handleToday="handleToday"
      @handleSomeDay="handleSomeDay"
    />
    <ul class="calendar-week clearfix">
      <li v-for="(item, index) in calendarTitleArr" :key="index" class="week-item">{{ item }}</li>
    </ul>
    <ul class="calendar-view clearfix">
      <li
        v-for="(item) in visibleCalendar"
        :key="item.date + ''"
        :class="[
          {'month-class': !isCurrentMonth(item.date)},
          {'todayBg': isCurrentDay(item.date)},
          {'is-mobile': isMobile}
        // {'handleDay': item.clickDay}
        ]"
        class="date-view"
        @click="handleClickDay(item)"
      >
        <!-- <span
          :style="dayStyle"
          :class="[{'opacity-class': !isCurrentMonth(item.date)}]"
          class="date-day"
        >{{ item.day }}</span> -->
        <div v-if="isCurrentMonth(item.date)" class="calendar-slot">
          <slot :time="item" />
        </div>
        <div v-else>
          <div class="only-date">{{ item.day }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import * as utils from './calendar.js';
import calendarHeader from './calendar-head.vue';
export default {
  name: 'SubcribeCalendar',
  components: {
    calendarHeader
  },
  props: {
    options: {
      type: Object,
      default: () => null
    },
    statistics: {
      type: Object,
      default: () => null
    },
    isMobile: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const { year, month, day } = utils.getNewDate(new Date());
    return {
      headOptions: {
        type: this.options.type,
        style: this.options.headStyle,
        date: '',
        dateObj: null
      },
      // calendarTitleArr: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN '],
      calendarTitleArr: ['日', '一', '二', '三', '四', '五', '六'],
      time: { year, month, day },
      calendarList: []
    };
  },
  computed: {
    dayStyle: function() {
      return {
        textAlign: this.options.viewStyle.day
      };
    },
    visibleCalendar() {
      const calendatArr = [];
      const { year, month } = utils.getNewDate(
        utils.getDate(this.time.year, this.time.month, 1)
      );
      const currentFirstDay = utils.getDate(year, month, 1);
      // 获取当前月第一天星期几
      const weekDay = currentFirstDay.getDay();
      // const startTime = currentFirstDay - (weekDay - 1) * 24 * 60 * 60 * 1000;
      const startTime = currentFirstDay - weekDay * 24 * 60 * 60 * 1000;
      let monthDayNum;
      if (weekDay === 5 || weekDay === 6) {
        monthDayNum = 42;
      } else {
        monthDayNum = 35;
      }
      for (let i = 0; i < monthDayNum; i++) {
        calendatArr.push({
          date: new Date(startTime + i * 24 * 60 * 60 * 1000),
          year: year,
          month: month + 1,
          day: new Date(startTime + i * 24 * 60 * 60 * 1000).getDate(),
          clickDay: false
        });
      }
      return calendatArr;
    }
  },
  watch: {
    visibleCalendar(newValue, oldValue) {
      this.calendarList = newValue;
    },
    time(newValue, oldValue) {
      this.headOptions.date = `${newValue.year}-${newValue.month + 1}`;
    }
  },
  created() {
    this.calendarList = this.visibleCalendar;
    this.calendarType = this.options.calendarType;
    this.headOptions.date = `${this.time.year}-${this.time.month + 1}`;
  },
  methods: {
    // 是否是当前月
    isCurrentMonth(date) {
      const { year: currentYear, month: currentMonth } = utils.getNewDate(
        utils.getDate(this.time.year, this.time.month, 1)
      );
      const { year, month } = utils.getNewDate(date);
      return currentYear === year && currentMonth === month;
    },
    // 是否是今天
    isCurrentDay(date) {
      const {
        year: currentYear,
        month: currentMonth,
        day: currentDay
      } = utils.getNewDate(new Date());
      const { year, month, day } = utils.getNewDate(date);
      return currentYear === year && currentMonth === month && currentDay === day;
    },
    // 日历组件时间切换处理
    handlePickDate(dateFormat, type) {
      const nowDate = utils.getDate(this.time.year, this.time.month, 1);
      switch (dateFormat) {
        case 'year': {
          switch (type) {
            case 1: {
              nowDate.setFullYear(nowDate.getFullYear() - 1);
              break;
            }
            case 2: {
              nowDate.setFullYear(nowDate.getFullYear() + 1);
              break;
            }
            default:break;
          }
          break;
        }
        case 'month': {
          switch (type) {
            case 1: {
              nowDate.setMonth(nowDate.getMonth() - 1);
              break;
            }
            case 2: {
              nowDate.setMonth(nowDate.getMonth() + 1);
              break;
            }
            default:break;
          }
          break;
        }
        default:break;
      }
      this.time = utils.getNewDate(nowDate);
      this.headOptions.date = `${this.time.year}-${this.time.month + 1}`;
      const strDate = (this.headOptions.date + '-01').replace(/-/g, '/');
      const timestamp = new Date(strDate).getTime();
      this.$emit('handlePickDate', timestamp);
    },
    // 获取某一天
    handleSomeDay(date) {
      this.time = date;
      this.headOptions.date = `${date.year}-${date.month + 1}`;
      const strDate = (this.headOptions.date + '-01').replace(/-/g, '/');
      const timestamp = new Date(strDate).getTime();
      this.$emit('handleSomeDay', timestamp);
    },
    // 点击回到今天
    handleToday() {
      const date = new Date();
      this.time = utils.getNewDate(date);
      const timestamp = date.getTime();
      this.$emit('handleToday', timestamp);
    },

    // 点击某一天
    handleClickDay(item) {
      this.$forceUpdate();
      this.$emit('handleClickDay', item);
      this.calendarList.map(x => {
        x.clickDay = false;
      });
      this.$set(item, 'clickDay', true);
    }
  }
};
</script>
<style lang="scss" scoped>
.cc-calendar {
  ul, ol {
    padding: 0;
    margin: 0;
    list-style: none
  }
  .calendar-week {
    width: 100%;
    line-height: 40px;
    border: 1px solid #EBEEFD;
    border-top: none;
    height: 40px;
    background: #F9F9F9;
    .week-item {
      float: left;
      width: 14.285%;
      text-align: center;
      font-size: 14px;
      color: #141C3D;
      font-weight: 600;
    }
  }
  .calendar-view {
    width: 100%;
    border-left: 1px solid #EBEEFD;
    border-bottom-left-radius: 8px;
    .date-view {
      float: left;
      width: 14.285%;
      height: 147px;
      border-right: 1px solid #EBEEFD;
      border-bottom: 1px solid #EBEEFD;
      padding: 0 6px 6px 7px;
      cursor: pointer;
      &.is-mobile {
        height: 87px;
      }
      .date-day {
        padding: 8px 8px 0;
        display: block;
        width: 100%;
        font-size: 14px;
        color: #7f8794;
      }
      .calendar-num {
        margin-top: 6px;
        display: block;
        width: 100%;
        text-align: center;
        font-size: 30px;
        color: #424953;
      }
      &:last-child {
        border-bottom-right-radius: 8px;
      }
      &:nth-last-child(7) {
        border-bottom-left-radius: 8px;
      }
    }
    .opacity-class {
      opacity: 0.5;
    }
    .month-class {
      background-color: rgba(244, 245, 250,0.52);
    }
    .todayBg {
      box-shadow:2px 4px 13px 0px rgba(221,225,234,1);
      border: 2px solid #406EFF;
      border-radius: 4px;
      position: relative;
    }
    .handleDay {
      background: #2061ff !important;
      .date-day {
        color: #bccfff !important;
      }
      .calendar-num {
        color: #fff !important;
      }
    }
  }
}
.only-date {
  height: 43px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #333333;
  opacity: 0.5;
}
.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}
</style>
